<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import { fn } from "storybook/test";
    import { Button } from "../Button";
    import { createUniqueId } from "../utils/createUniqueId";
    import Icon from "@iconify/svelte";
    import NoticePanel from "./NoticePanel.svelte";
    import { notice, type NoticeConfig } from ".";

    const { Story } = defineMeta({
        title: "Components/Views/Notice",
        component: NoticePanel,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <Button
            onclick={() => {
                notice.open({
                    title: "提示",
                    content: "这是一条提示信息",
                    onclose: () => {
                        console.log("closed");
                    },
                });
            }}>提示</Button
        >
        <Button
            type="secondary"
            onclick={() => {
                notice.info({
                    title: "提示",
                    content: "这是一条提示信息",
                    onclose: () => {
                        console.log("closed");
                    },
                });
            }}>消息</Button
        >
    {/snippet}
</Story>

<Story name="Types">
    {#snippet template(args)}
        <Button
            onclick={() => {
                notice.info({
                    title: "提示",
                    content: "这是一条提示信息",
                });
            }}>消息</Button
        >

        <Button
            type="success"
            onclick={() => {
                notice.success({
                    title: "提示",
                    content: "这是一条成功提示信息",
                });
            }}>成功</Button
        >

        <Button
            type="warning"
            onclick={() => {
                notice.warning({
                    title: "提示",
                    content: "这是一条告警提示信息",
                });
            }}>告警</Button
        >

        <Button
            type="error"
            onclick={() => {
                notice.error({
                    title: "提示",
                    content: "这是一条错误提示信息",
                });
            }}>错误</Button
        >

        <Button
            type="secondary"
            onclick={() => {
                notice.help({
                    title: "提示",
                    content: "这是一条帮助提示信息",
                });
            }}>帮助</Button
        >
    {/snippet}
</Story>

<Story name="Themes">
    {#snippet template(args)}
        <Button
            onclick={() => {
                notice.info({
                    title: "提示",
                    theme: "light",
                    content: "这是一条提示信息",
                });
            }}>消息</Button
        >

        <Button
            type="success"
            onclick={() => {
                notice.success({
                    title: "提示",
                    theme: "light",
                    content: "这是一条成功提示信息",
                });
            }}>成功</Button
        >

        <Button
            type="warning"
            onclick={() => {
                notice.warning({
                    title: "提示",
                    theme: "light",
                    content: "这是一条告警提示信息",
                });
            }}>告警</Button
        >

        <Button
            type="error"
            onclick={() => {
                notice.error({
                    title: "提示",
                    theme: "light",
                    content: "这是一条错误提示信息",
                });
            }}>错误</Button
        >

        <Button
            type="secondary"
            onclick={() => {
                notice.help({
                    title: "提示",
                    theme: "light",
                    content: "这是一条帮助提示信息",
                });
            }}>帮助</Button
        >
    {/snippet}
</Story>

<Story name="Dock">
    {#snippet template(args)}
        <Button
            onclick={() => {
                notice.info({
                    title: "提示",
                    dock: "topLeft",
                    content: "这是一条提示信息",
                });
            }}>左上角</Button
        >

        <Button
            onclick={() => {
                notice.info({
                    title: "提示",
                    dock: "topRight",
                    content: "这是一条提示信息",
                });
            }}>右上角</Button
        >
        <Button
            onclick={() => {
                notice.info({
                    title: "提示",
                    dock: "bottomLeft",
                    content: "这是一条提示信息",
                });
            }}>左下角</Button
        >
        <Button
            onclick={() => {
                notice.info({
                    title: "提示",
                    dock: "bottomRight",
                    content: "这是一条提示信息",
                });
            }}>右下角</Button
        >
    {/snippet}
</Story>

<Story name="WithButtons">
    {#snippet template(args)}
        {#snippet confirmBtns(item: NoticeConfig)}
            <Button
                type="primary"
                size="small"
                onclick={() => {
                    notice.close(item.key!);
                }}>confirm</Button
            >
        {/snippet}
        <Button
            onclick={() => {
                const key = createUniqueId();
                notice.info({
                    title: "提示",
                    key: key,
                    duration: 0,
                    content: "这是一条提示信息",
                    buttons: confirmBtns,
                });
            }}>左上角</Button
        >
    {/snippet}
</Story>
